<style scoped>
h2,ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.history_invite{
    padding: 20px;
}
h2{
    font-size: 18px;
}
ul{
    color: #666;
    margin-bottom: 20px;
}
li{
    line-height: 30px;
    display: flex;
    justify-content:space-around;
}
.name{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.history,.history ul{
    color: #999;
}
</style>

<template>
    <div class="history_invite">
        <h2>最新邀请</h2>
        <ul>
            <li v-for="(val,index) in now" :key="index">
                <p class="name">{{val.name}}</p>
                <p>{{val.tel | format_tel}}</p>
                <p>+{{index===2 && !history.length?3:1}}次</p>
            </li>
        </ul>
        <div class="history">
            <h2>历史邀请</h2>
            <ul>
                <li v-for="(val,index) in history" :key="index">
                    <p class="name">{{val.name}}</p>
                    <p>{{val.tel | format_tel}}</p>
                    <p>+{{index===(history.length-3)?3:1}}次</p>
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
import {invite_history} from "@/assets/api"
export default {
    data(){
        return{
            history:[],
            now:[]
        }
    },
    filters:{
        format_tel(val){
            return !val?'':val.substr(0,3)+'****'+val.substr(-4)
        }
    },
    created(){
        invite_history().then(res=>{
            if(res){
                this.history=res.data.history
                this.now=res.data.now
            }
        })
    }
}
</script>

